<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Customize column editor - Sigma Ajax data grid control sample</title>
<meta http-equiv="Content-Language" content="en-us" /> 
<meta name="keywords" content="dhtml grid, AJAX grid, grid customization, self-defined editor" > 
<meta name="description" content="How to customize editor for column" >

<script src="highlight/jssc3.js" type="text/javascript"></script>
<link href="highlight/style.css" rel="stylesheet" type="text/css" />

<style type="text/css" media="all">@import "./css/doc_no_left.css";</style>
<script src="../../../js/menu.js" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" media="all" href="../grid/calendar/calendar-blue.css"  />
<script type="text/javascript" src="../grid/calendar/calendar.js"></script>
<script type="text/javascript" src="../grid/calendar/calendar-cn-utf8.js"></script>
<script type="text/javascript" src="../grid/calendar/calendar-setup.js"></script>

<link rel="stylesheet" type="text/css" href="../grid/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="../grid/skin/vista/skinstyle.css" />
<script type="text/javascript" src="./data/test_data.js"></script>
<script type="text/javascript" src="../grid/gt_msg_en.js"></script>
<script type="text/javascript" src="../grid/gt_const.js"></script>
<script type="text/javascript" src="../grid/gt_grid_all.js"></script>
<script type="text/javascript" src="../grid/flashchart/fusioncharts/FusionCharts.js"></script>
    
    
<script type="text/javascript" >

var grid_demo_id = "myGrid1" ;


var dsOption= {

	fields :[
		{name : 'no'  },
		{name : 'country'  },
		{name : 'customer'  },
		{name : 'employee'  },
		{name : 'bill2005' ,type: 'float' },
		{name : 'bill2006' ,type: 'float' },
		{name : 'bill2007' ,type: 'float' },
		{name : 'bill2008' ,type: 'float' },
		{name : 'orderDate' ,type:'date'  }
		
	],
  data : __TEST_DATA__,
	recordType : 'array'
}

var myDialogEditorCreater = new Sigma.DialogEditor({
		id: "myDialogEditor1",
		gridId : "myGrid1" ,
		width: 250,
		height:150 ,
		title : 'Name Editor',
		body : ['<textarea id="my_name_input" rows="5" cols="20" style="width:99%"></textarea><br/>',
				'<input type="button" value="OK" onclick="Sigma.$grid(\'myGrid1\').activeDialog.confirm()"/>'].join(''),

		getValue : function(){
			return Sigma.$("my_name_input").value;
		},

		setValue : function(value){
			Sigma.$("my_name_input").value=value;
		},
		active : function(){
			Sigma.U.focus(Sigma.$("my_name_input"));  
		}

		// Developer could do validation, formating work by overwritting event handler beforeShow, afterShow, beforeHide, afterHide of dialog 

	});

var colsOption = [
     {id: 'no' , header: "Order No" , width :60  },
     {id: 'employee' , header: "Employee" , width :80, 	editor: myDialogEditorCreater },
	   {id: 'country' , header: "Country" , width :70  },
	   {id: 'customer' , header: "Customer" , width :80  },
	   {id: 'bill2005' , header: "2005" , width :60},
	   {id: 'bill2006' , header: "2006" , width :60},
	   {id: 'bill2007' , header: "2007" , width :60},
	   {id: 'bill2008' , header: "2008" , width :60},
	   {id: 'orderDate' , header: "Delivery Date" , width :100}
       
];
 


function getTestData(grid) {
	var responseT={};
	var pageInfo= grid.getPageInfo();
	responseT[grid.CONST.data]=__TEST_DATA__.slice( pageInfo.startRowNum-1,pageInfo.endRowNum);
	responseT[grid.CONST.pageInfo]={totalRowNum :__TEST_DATA__.length } ;
	return responseT;
}

var gridOption={
	
	debug : false,

	id : grid_demo_id,
	loadUrl : getTestData,
	saveUrl : './data/masterData.js',
	width: "700",  //"100%", // 700,
	height: "200",  //"100%", // 330,
	
	container : 'gridbox', 
	replaceContainer : true, 
	listenResize : false,
	//showIndexColumn : true,

	resizable : false,
	editable : false,
	remoteSort : false,

	allow_gmenu : false,
	allow_freeze : false,
  groupable : false,

	toolbarPosition : 'bottom',
	encoding : 'UTF-8', // Sigma.$encoding(), 
	pageStateBar : null , //'outStateBar',
	dataset : dsOption ,
	columns : colsOption ,
	clickStartEdit : false ,
	defaultRecord : ["","","","",0,0,0,0,"2008-01-01"],
	pageInfo : { pageSize:10 }
};




var mygrid=new Sigma.Grid( gridOption );
Sigma.Util.onLoad( Sigma.Grid.render(mygrid) );


//////////////////////////////////////////////////////////






</script>
</head>
<body>

<div id="page-container">
  <div id="main-nav">
            <div id="logo" style="margin: 10px">
                                        <a href="http://www.sigmawidgets.com/">
                                            <img border="0"  src="http://www.sigmawidgets.com/images/logo.gif"/></a></div>
                                    <div id="menu">
                                        <div class="menuLinkHome">
                                            <a href="http://www.sigmawidgets.com/">Home</a></div>
                                        <div class="menuLink" id="menu1" onMouseOver="ResetMenu(1); this.className='menuLinkOn'; dropdownmenu(this, event, menuProducts, '180px')"
                                            onmouseout="delayhidemenu()">
                                            <a href="http://www.sigmawidgets.com/products/sigma_grid/features.html">Products </a>
                                            <img class="arrow" hspace="5" src="http://www.sigmawidgets.com/images/arrow.gif" border="0"></div>
                                        <div class="menuLink" id="menu2" onMouseOver="ResetMenu(2); this.className='menuLinkOn'; dropdownmenu(this, event, menuServices, '180px')"
                                            onmouseout="delayhidemenu()">
                                            <a href="http://www.sigmawidgets.com/products/sigma_grid/features.html">Company &amp;
                                                Services</a><img class="arrow" hspace="5" src="http://www.sigmawidgets.com/images/arrow.gif" border="0"></div>
                                        <div class="menuLink" id="menu3" onMouseOver="ResetMenu(3); this.className='menuLinkOn'; dropdownmenu(this, event, menuDemo, '180px')"
                                            onmouseout="delayhidemenu()">
                                            <a href="http://www.sigmawidgets.com/products/sigma_grid/demos/index.html"><font
                                                color="ff8c00">Live Demo<img class="arrow" hspace="5" src="http://www.sigmawidgets.com/images/arrow.gif" border="0"></font></a></div>
                                        <div class="menuLinkHome">
                                            <a href="http://www.sigmawidgets.com/download.html"><font color="ff8c00">Download</font></a></div>
                                        <div class="menuLinkHome">
                                            <a href="http://www.sigmawidgets.com/forum"><font color="ff8c00">Forum</font></a></div>
                                    </div>
</div>

   
  <div id="header">
  <h1>
      Product - Sigma Grid 2.0 - Sample</h1>
  </div>

  <div id="content">
    
	  <h2>Customize column editor</h2>
      <p>
          The following sample shows how define a new editor for some specials columns. For
          example, developer can develope a color-picker for color input, or a calculator
          for number input. This feature enable developers to integrate grid with third part
          components, such as FCK Editor.
          <br>
          Double click any cells on employee column and see what happens.</p>
    <div id="bigbox" style="margin:15px;display:!none;">
      <div id="gridbox" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;height:200px;width:700px;" ></div>
    </div>
    
    
    
        <p>
        <textarea name="code" class="javascript">

        var myDialogEditorCreater = function(){
        
        var myd = new Sigma.Dialog({
        id: "myDiaLogEditor1",
        gridId : "myGrid1" , 
        width: 250,
        height:150 ,
        title : 'Customized Employee Editor',
        body : ['
        <textarea id="my_name_input" rows="5"',
        ' cols="20" style="width:99%"></textare','a><br/>',
				'<input type="button" value="OK" ',
        'onclick="Sigma.$grid(\'myGrid1\').activeDialog.confirm()"/>'].join(''),
		getValue : function(){
			return Sigma.$("my_name_input").value;
		},

		setValue : function(value){
			Sigma.$("my_name_input").value=value;
		},

		active : function(){
			Sigma.Util.focus(Sigma.$("my_name_input")); 
		}

	});

	return myd;

}
var colsOption = [
{id: 'employee' , header: "Employee" , width :80,editor: myDialogEditorCreater }   
];
      
	    </textarea>
          </p>
        <h2>
        Related Links
        </h2>
		</p>
    <p><a href="demo_list.html">Demos List</a> - <a href="example_column_editor.html"> Cell editor</a> 
        </p>
          
        </div>
        
        <div id="footer">
        All contents are (c) Copyright 2005 - 2008, Sigma Software Inc. All rights Reserved
        </div>
          </div>

    </blockquote>
    <script type="text/javascript">
jssc.colorAll("code");
        </script>
           
</body>
</html>